function  section_header_image () {
    this.upload = function () {
        var data = new FormData();
        
        //data.append ("section",section);
        for (i=1;i<=4;i++) {
         try {jQuery.each($('#file'+i)[0].files, function(file) {
            data.append('file'+i, file);
        });
         } catch (err) {alert(1)}
        }
               
        $.ajax({
            url: '/modules/section_header/upload_image.php',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                alert(data);
            }
        })
    }
    this.remove = function (image_url) {
        if ($("img.img_existing").length <= 1) alert("At least one image is required");
        else {
            var confirm_delete = confirm("Detete " + image_url + "?");
            if (confirm_delete) {
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: "/modules/section_header/delete_image.php",
                    data: {image_url : image_url},
                    success: function (result) {
                        if (result == "success") {
                            alert(image_url + " deleted");
                            $("#section_header img").click();
                        }
                        else alert("error deleting " + image_url +"\n" + result);
                        return result;
                    }
                });
            }
        }
    }
}

function section_header () {
    this.animate = {
        fade_id : 5,
        loop_id_t : 0,
        fade_id_t : 0,
        opacity:    100,
        change_interval : 5000,
        fade_out_t : 0,
        set_opacity : function (obj, opacity) {
            if (obj != null) {
		obj.style.opacity = opacity/100;
		obj.style.filter = 'alpha(opacity=' + opacity + ')';
            }
        },
        section_fade_out : function () {
            this.opacity = this.opacity - 1;
            var img = document.getElementById("section_header_image_" + this.fade_id);
            if (img == null) return false;
            if (img != null) img.style.zIndex = 2;
            this.set_opacity (img, this.opacity);	
	
            var next_id = this.fade_id + 1;
            var next_img = document.getElementById("section_header_image_" + next_id);
            if (next_img == null) {
		next_id = 0;
		next_img = document.getElementById("section_header_image_" + next_id);
            }
            if (next_img!=null)next_img.style.zIndex = 1;
            this.set_opacity (next_img, 100);
	
            if (this.opacity <= 0) {
		this.opacity = 100;
		img.style.zIndex = 0;
            } else {
	    //clearTimeout(fade_id_t);
                var _this = this;
		//this.fade_out_t = setTimeout("section_header.animate.section_fade_out ()",1);
                this.fade_out_t = setTimeout(function() {_this.section_fade_out ();}, 1);
            }
        },
        section_fade_through : function () {
	  
            this.fade_id++;
	
            var img = document.getElementById("section_header_image_" + this.fade_id);
            if (img == null) this.fade_id = 0;
            //console.log(fade_id);
            this.section_fade_out ();
	//clearTimeout(fade_id_t);
       
            //this.fade_id_t = setTimeout("section_header.animate.section_fade_through ()",this.change_interval);
            var _this = this;
            this.load_text();
            this.fade_id_t = setTimeout(function() {_this.section_fade_through ();},this.change_interval);
        },
        start_fades : function () {
            //alert(this.section_fade_through.toString())
           
            this.section_fade_through ();
            
        },
        load_text : function () {
            $.ajax({
                    async: true,
                    type: 'POST',
                    url: "/modules/section_header/get_text.php",
                    data: {
                            area : area,
                            section : section
                        },
                    success: function (result) {
                        if (document.getElementById(section + "_info") != null)  $("#" + section + "_info").html(result);
                     }
                });
        }
    };
    this.edit = {
        header_id : 0,
        save_required : false,
        current_image : "",
        image_list : {},
        initialize : function () {
            $("#" + section + "_info").css("border","1px dashed grey");
            $("#" + section + "_info").attr("contenteditable", 'true');
            $("#" + section + "_info").attr("save_required", 'false');
            $("#" + section + "_info").click(function (){$(this).attr("save_required", 'true')})
            $("#section_header_image_" + this.header_id).css ("opacity","1"); 
            this.load_text();
            $("#section_header_image_upload").css("display","block");
        },
        initialize_image : function () {
            $("#section_header img[id^='section_header_image_']").css("border","1px dashed")
            this.load_image_control();
        },
        load_image_control : function () {
            if ($("#section_head_image_area").length > 0) {
                
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: "/modules/section_header/get_image_list.php",
                    datatype: "json",
                    data: {
                            area : area,
                            section : section
                        },
                    success: function (result) {
                            var html = "<div>Banner Images</div>";
                            this.image_list = jQuery.parseJSON(result);
                            var i =0;
                            for(_obj in this.image_list) {
                                i++;
                                
                                if ((typeof this.image_list[_obj] != "function")&&(this.image_list[_obj] != "undefined")) {
                                    var image_url = "/modules/section_header/templates/" + area + "/" + section + "/images/banner/" + this.image_list[_obj];
                                    html += "<div class=sh_image_label>" + this.image_list[_obj] +  "</div>"
                                        + "<div>"
                                        + "<img class=img_existing src=\"" + image_url + "\">"
                                        /*+ "<input id=file" + i + " class=image_upload_file type=file>"*/
                                        + "<iframe style=\"height:60px;\" frameborder=0 src=\"/modules/section_header/upload_image.php?id=" + i +"&section=" +section+ "&area=" + area +"\"></iframe>"
                                        + "<img image_url=\"" + image_url + "\" class=img_delete src=\"/modules/toolbar/templates/create/images/icons/delete.png\">"
                                        + "</div>";
                                
                                        //html = "<iframe></iframe"
                                    //$("#section_head_image_area").append(this.image_list[_obj]);
                                }
                            }
                            
                            
                            
                            for (j=i;j<=4;j++) {
                                    html += "<div class=sh_image_label>New</div>"
                                        + "<div>"
                                        + "<iframe style=\"height:60px;\" frameborder=0 src=\"/modules/section_header/upload_image.php?id=" + j +"&section=" +section+ "&area=" + area +"\"></iframe>"
                                        + "</div>";
                                }
                            
                            /*html += "<div class=btn_upload_image style=\"text-align:center\"><button>Upload images</button></div>"*/
                            
                            html += "<div><img id=\"btn_close_header\" src=\"/modules/toolbar/templates/create/images/icons/cross.png\"></div>";
                            $("#section_head_image_area").html(html);
                            _section_header_image = new section_header_image();
                            $(".img_delete").click (function () {_section_header_image.remove($(this).attr("image_url"))});
                            $("#btn_close_header").click (function () { $("#section_head_image_area").css("display","none")});
                            $("#btn_close_header").css ({cursor: "pointer"})
                            
                            /*var _section_header_image = new section_header_image();
                            $(".btn_upload_image").click (function () {_section_header_image.upload()});*/

                             $("#section_head_image_area").css("display","block"); 
                        }
                });
                
                $(".sh_image_label").css ({
                    "font-size" : "75%"
                });
                
                $("#section_head_image_area .img_existing").css ({
                    width : "25%",
                    "float" : "left",
                    "margin-right":"2px"
                });
                
                $("#section_head_image_area .img_delete").css ({
                    "float" : "right",
                    "margin-top" : "10px"
                });
                
                $("#section_head_image_area").css ({
                    top: parseInt($("#section_header").css("top")) + parseInt($("#section_header").css("height")),
                    width:"450px",
                    position: "absolute",
                    "background-color": "silver",
                    "border-width":"2px",
                    "border-style":"outset",
                    "z-index": 501
                });
                
                
                //$("#section_head_image_area").html("OK");
                
                
                
            } else alert ("section_head_image_area div required");
        },
        upload_image : function () {
          alert(3)  
        },
        next : function () {
              this.save();
              $("#section_header_image_" + this.header_id).css ("opacity","0");
              this.header_id++;
              if (!this.image_exists("section_header_image_" + this.header_id)) this.header_id = 0;
              $("#section_header_image_" + this.header_id).css ("opacity","1");
              this.current_image = document.getElementById("section_header_image_" + this.header_id).src;
              this.load_text();
        },
        load_text : function () {
            $.ajax({
                    async: false,
                    type: 'POST',
                    url: "/modules/section_header/get_text.php",
                    data: {
                            area : area,
                            section : section,
                            html : document.getElementById(section + "_info").innerHTML
                        },
                    success: function (result) {
                        if ($("#" + section + "_info").length > 0) $("#" + section + "_info").html(result);
                    }
                });
        },
        image_exists : function (id) {
            if (document.getElementById(id) != null) return true;
            else return false;
        },
        save : function () {
            //alert (document.getElementById("section_header_image_" + this.header_id).src + " " + this.current_image);
            if  ($("#" + section + "_info").attr("save_required") == 'true') {
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: "/modules/section_header/save_section_header.php",
                    data: {
                            area : area,
                            section : section,
                            html : document.getElementById(section + "_info").innerHTML,
                            image : document.getElementById("section_header_image_" + this.header_id).src
                    },
                    success: function (result) {
                        $("#" + section + "_info").attr("save_required",'false');
                    }
                });
            }
        }
    }
}



